<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>新闻信息</title>
    <meta name="author" content="pxy">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../CSS/select.css">
    <link rel="stylesheet" type="text/css" href="../../CSS/input.css">
</head>
<body class="layui-layout-body">
        <div class="demoTable">
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <span>选择新闻类型：</span>
            <select class="select" id="demoReload" name="id">
                <option value="509">财经</option>
                <option value="510">科技</option>
                <option value="511">军事</option>
                <option value="512">时尚</option>
                <option value="513">NBA</option>
                <option value="514">股票</option>
                <option value="515">游戏</option>
                <option value="516">健康</option>
                <option value="517">知否</option>
                <option value="518">要闻</option>
                <option value="519">体育</option>
                <option value="520">娱乐</option>
                <option value="521">头条</option>
                <option value="522">视频</option>
                <option value="525">热点</option>
                <option value="526">小视频</option>
            </select>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <span class="layui-badge layui-bg-cyan">页</span>
            <span class="layui-badge">码</span>
            <span class="layui-badge layui-bg-orange">大</span>
            <span class="layui-badge layui-bg-green">小</span>
            <span class="layui-badge layui-bg-cyan">请</span>
            <span class="layui-badge layui-bg-blue">勿</span>
            <span class="layui-badge layui-bg-black">超</span>
            <span class="layui-badge layui-bg-gray">过</span>
            <span class="layui-badge layui-bg-cyan">200</span>
            <span class="layui-badge layui-bg-orange">！</span>
            <span class="layui-badge layui-bg-green">！</span>
            <span>请输入页码：</span>
            <input type="text" class="input" name="id1" id="demoReload1">
            <span class="layui-badge layui-bg-cyan">页</span>
            <span class="layui-badge">码</span>
            <span class="layui-badge layui-bg-green">和</span>
            <span class="layui-badge layui-bg-cyan">类</span>
            <span class="layui-badge layui-bg-blue">型</span>
            <span class="layui-badge layui-bg-orange">为</span>
            <span class="layui-badge layui-bg-green">必</span>
            <span class="layui-badge layui-bg-cyan">填</span>
            <span class="layui-badge layui-bg-blue">项</span>
            <button class="layui-btn" data-type="reload">查询</button>
        </div>

        <table class="layui-hide" id="test" lay-filter="test"></table>
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
            </div>
        </script>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
        <script src="../../layui/layui.all.js" charset="utf-8"></script>
        <script>
            layui.use('table', function () {
                var table = layui.table;
                table.render({
                    elem: '#test'
                    ,
                    url: 'https://www.mxnzp.com/api/news/list?typeId=509&page=2&app_id=sngmqkqxuln6jkik&app_secret=RVV0aDBJbnpIa2k3REdVQmNuaWI2dz09'
                    ,
                    parseData: function (res) {
                        return {
                            "code": 0,
                            "msg": res.message,
                            "count": 200,
                            'data': res.data,
                        };
                    }
                    ,
                    toolbar: '#toolbarDemo'
                    ,
                    defaultToolbar: ['filter', 'exports', 'print', {
                        title: '提示'
                        , layEvent: 'LAYTABLE_TIPS'
                        , icon: 'layui-icon-tips'
                    }]
                    ,
                    cols: [[
                        {type: 'checkbox', fixed: 'left'},
                        {field: 'title', width: 350, title: '标题'}
                        , {field: 'imgList', width: 450, title: '图片列表'}
                        , {
                            field: 'source', width: 200, title: '来源', edit: 'text', templet: function (res) {
                                return '<em>' + res.source + '</em>'
                            }
                        }
                        , {field: 'newsId', width: 200, title: 'newsId'}
                        , {field: 'postTime', title: 'postTime', minWidth: 200}
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                    ]]
                    ,
                    id: 'testReload',
                    page: true
                });
                table.on('toolbar(test)', function (obj) {
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch (obj.event) {
                        case 'getCheckData':
                            var data = checkStatus.data;
                            layer.alert(JSON.stringify(data));
                            break;
                        case 'getCheckLength':
                            var data = checkStatus.data;
                            layer.msg('选中了：' + data.length + ' 个');
                            break;
                        case 'isAll':
                            layer.msg(checkStatus.isAll ? '全选' : '未全选');
                            break;

                        case 'LAYTABLE_TIPS':
                            layer.alert('这是工具栏右侧自定义的一个图标按钮');
                            break;
                    }
                    ;
                });
                table.on('tool(test)', function (obj) {
                    var data = obj.data;
                    //console.log(obj)
                    if (obj.event === 'del') {
                        layer.confirm('真的删除行么', function (index) {
                            obj.del();
                            layer.close(index);
                        });
                    } else if (obj.event === 'edit') {
                        layer.prompt({
                            formType: 2
                            , value: data.source
                        }, function (value, index) {
                            obj.update({
                                source: value
                            });
                            layer.close(index);
                        });
                    }
                });


                var $ = layui.$, active = {
                    reload: function () {
                        var demoReload = $('#demoReload');
                        var demoReload1 = $('#demoReload1');
                        //执行重载
                        table.reload('testReload', {
                            url: 'https://www.mxnzp.com/api/news/list?typeId=' + demoReload.val() + '&page=' + demoReload1.val() + '&app_id=sngmqkqxuln6jkik&app_secret=RVV0aDBJbnpIa2k3REdVQmNuaWI2dz09',
                            page: {
                                curr: 1
                            }
                            , where: {
                                key: {
                                    title: demoReload.val()
                                }
                            }
                        }, 'data');
                    }
                };

                $('.demoTable .layui-btn').on('click', function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
            });
        </script>
</body>
</html>